<template>
  <a-table :columns="columns" :data-source="data" :scroll="{x: 1500, y: 500}" class="components-table-demo-nested" v-scroll="myScroll">
    <template #headerCell="{ column }" class="myfixed">
      <template v-if="column.key === 'name'">
        <span>
          Name
        </span>
      </template>
    </template>
    <template #bodyCell="{ column,record }">
      <template v-if="column.key === 'operation'">
        <a @click="transmitClick(record)">Publish</a>
      </template>
    </template>
  </a-table>
  <smile-outlined />
  {{isOpen}}
  <childrenVue :row="row.obj" :is-show="isOpen"></childrenVue>
</template>
<script lang="ts" setup>
import { defineComponent, reactive, ref } from 'vue'
import { SmileOutlined } from '@ant-design/icons-vue'
import childrenVue from './children.vue'
const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Platform', dataIndex: 'platform', key: 'platform' },
  { title: 'Version', dataIndex: 'version', key: 'version' },
  { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  { title: 'Creator', dataIndex: 'creator', key: 'creator' },
  { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
  { title: 'Action', key: 'operation', fixed: 'right' }
]
const data = reactive<Array<any>>([])
for (let i = 0; i < 20; ++i) {
  data.push({
    id: 10 + i,
    key: i,
    name: `Screem ${i + 1}`,
    platform: 'iOS',
    version: '10.3.4.5654',
    upgradeNum: 500,
    creator: 'Jack',
    createdAt: '2014-12-24 23:12:00',
    endTime: '2022-01-12 10:01:10'
  })
}
const row = reactive({
  obj: {}
})
const isOpen = ref(false)
const transmitClick = (record) => {
  row.obj = record
  isOpen.value = true
}
const top = ref<number>(10)
const myScroll = (e:any) => {
  console.log(e.srcElement.scrollTop)
  console.log(e.srcElement.scrollLeft)
}
</script>
